<template>

  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="cs" label="参数/皮带" width="100" />
    <el-table-column prop="mx4p" label="2煤西主运4皮"  >
        <template #default="scope">
            <div id="imgBox">
                <img v-if="scope.row.mx4p" width="100%" height="100%" src="/images/greencircle.png">
                <img v-else src="/images/circle.png">
            </div>
        </template>
       
  </el-table-column>
    <el-table-column prop="mx3p" label="2煤西主运3皮"  >
        <template #default="scope">
            <div id="imgBox">
                <img v-if="scope.row.mx3p" width="100%" height="100%" src="/images/greencircle.png">
                <img v-else src="/images/circle.png">
            </div>
        </template>
</el-table-column>
    <el-table-column prop="mx2p" label="2煤西主运2皮" >
        <template #default="scope">
            <div id="imgBox">
                <img v-if="scope.row.mx2p" width="100%" height="100%" src="/images/greencircle.png">
                <img v-else src="/images/circle.png">
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="mx1p" label="2煤西主运1皮" >
        <template #default="scope">
            <div id="imgBox">
                <img v-if="scope.row.mx1p" width="100%" height="100%" src="/images/greencircle.png">
                <img v-else src="/images/circle.png">
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="mdxpd" label="2煤主运大巷皮带" >
        <template #default="scope">
            <div id="imgBox">
                <img v-if="scope.row.mdxpd" width="100%" height="100%" src="/images/greencircle.png">
                <img v-else src="/images/circle.png">
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="mxzy" label="3煤西主运皮带" >
        <template #default="scope">
            <div id="imgBox">
                <img v-if="scope.row.mxzy" width="100%" height="100%" src="/images/greencircle.png">
                <img v-else src="/images/circle.png">
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="mjzym" label="3煤集中主运皮带" >
        <template #default="scope">
            <div id="imgBox">
                <img v-if="scope.row.mjzym" width="100%" height="100%" src="/images/greencircle.png">
                <img v-else src="/images/circle.png">
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="m2p2b" label="3煤二盘区二部皮带" >
        <template #default="scope">
            <div id="imgBox">
                <img v-if="scope.row.m2p2b" width="100%" height="100%" src="/images/greencircle.png">
                <img v-else src="/images/circle.png">
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="m2p1b" label="3煤二盘区一部皮带" >
        <template #default="scope">
            <div id="imgBox">
                <img v-if="scope.row.m2p1b" width="100%" height="100%" src="/images/greencircle.png">
                <img v-else src="/images/circle.png">
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="mdzy" label="3煤东主运皮带" >
        <template #default="scope">
            <div id="imgBox">
                <img v-if="scope.row.mdzy" width="100%" height="100%" src="/images/greencircle.png">
                <img v-else src="/images/circle.png">
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="zj" label="主井皮带" >
        <template #default="scope">
            <div id="imgBox">
                <img v-if="scope.row.zj" width="100%" height="100%" src="/images/greencircle.png">
                <img v-else src="/images/circle.png">
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="sc" label="上仓皮带" >
        <template #default="scope">
            <div id="imgBox">
                <img v-if="scope.row.sc" width="100%" height="100%" src="/images/greencircle.png">
                <img v-else src="/images/circle.png">
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="pcgbj" label="配仓刮板机" >
        <template #default="scope">
            <div id="imgBox">
                <img v-if="scope.row.pcgbj" width="100%" height="100%" src="/images/greencircle.png">
                <img v-else src="/images/circle.png">
            </div>
        </template>
    </el-table-column>
    <el-table-column prop="pcpd" label="配仓皮带" >
        <template #default="scope">
            <div id="imgBox">
                <img v-if="scope.row.pcpd" width="100%" height="100%" src="/images/greencircle.png">
                <img v-else src="/images/circle.png">
            </div>
        </template>
    </el-table-column>
  </el-table>

</template>
  
  <script script setup lang="ts">
  import {reactive,watch,ref,inject} from "vue";
  const tableData=reactive([
    {
        cs:'机头跑偏',mx4p:0,mx3p:1,mx2p:1,mx1p:0,mdxpd:1,mxzy:1,mjzym:1,m2p2b:1,m2p1b:1,mdzy:1,zj:1,sc:1,pcgbj:1,pcpd:1
    },
    {
        cs:'中部跑偏',mx4p:1,mx3p:1,mx2p:1,mx1p:1,mdxpd:1,mxzy:1,mjzym:1,m2p2b:1,m2p1b:1,mdzy:1,zj:1,sc:1,pcgbj:1,pcpd:1
    },
    {
        cs:'机尾跑偏',mx4p:0,mx3p:0,mx2p:1,mx1p:1,mdxpd:1,mxzy:0,mjzym:1,m2p2b:1,m2p1b:1,mdzy:0,zj:1,sc:1,pcgbj:1,pcpd:1
    },
    {
        cs:'堆煤保护',mx4p:1,mx3p:1,mx2p:1,mx1p:1,mdxpd:1,mxzy:1,mjzym:1,m2p2b:1,m2p1b:1,mdzy:1,zj:1,sc:1,pcgbj:1,pcpd:1
    },
    {
        cs:'纵撕保护',mx4p:1,mx3p:0,mx2p:1,mx1p:1,mdxpd:1,mxzy:1,mjzym:0,m2p2b:1,m2p1b:0,mdzy:1,zj:1,sc:1,pcgbj:1,pcpd:1
    },
    {
        cs:'烟雾保护',mx4p:1,mx3p:1,mx2p:1,mx1p:1,mdxpd:1,mxzy:1,mjzym:1,m2p2b:1,m2p1b:1,mdzy:1,zj:1,sc:1,pcgbj:1,pcpd:0
    },
    {
        cs:'超温保护',mx4p:1,mx3p:1,mx2p:1,mx1p:0,mdxpd:1,mxzy:1,mjzym:1,m2p2b:1,m2p1b:1,mdzy:1,zj:1,sc:1,pcgbj:1,pcpd:1
    },
    {
        cs:'超温洒水',mx4p:1,mx3p:1,mx2p:1,mx1p:1,mdxpd:1,mxzy:1,mjzym:1,m2p2b:1,m2p1b:1,mdzy:1,zj:1,sc:1,pcgbj:1,pcpd:1
    },
    {
        cs:'速度报警',mx4p:1,mx3p:1,mx2p:1,mx1p:1,mdxpd:1,mxzy:1,mjzym:0,m2p2b:1,m2p1b:1,mdzy:1,zj:1,sc:1,pcgbj:1,pcpd:1
    },
    {
        cs:'超速停车',mx4p:0,mx3p:1,mx2p:1,mx1p:1,mdxpd:1,mxzy:1,mjzym:1,m2p2b:1,m2p1b:1,mdzy:1,zj:1,sc:1,pcgbj:1,pcpd:1
    },
  ])

  </script>
  <style scoped>
  #imgBox{
    width: 100%;
    height: 100%;
    text-align: center;
  }
  img {
    width: 25px;
    height: 25px;
    object-fit: cover;
  }
</style>